<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            width: 600px;
            height: 500px;
            border: 2px solid #aaa;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            /* align-content: stretch; */
        }

        .container div {
            order: 1;
            /* flex: 1; */
            width: 100px;
            height: 100px;
        }

        .child1 {
            background: red;
        }

        .child2 {
           
            background: purple;
        }

        .child3 {
            background: yellowgreen;
            /* flex: 2; */
            align-self:center;
        }

        .child4 {
            background: pink;
        }
    </style>
</head>

<body>
    <!-- 1.容器，2.项目|子元素 -->

    <!-- 
    display:flex;

    flex-direction（规定容器的主轴方向）
      row----x轴
      row-reverse----x轴翻转
      column----y轴
      column-reverse----y轴翻转

    justify-content（规定容器"主轴"水平对齐方式）
      flex-start----默认值，左侧对齐
      flex-end----右侧对齐
      center----居中对齐
      space-between----两端对齐
      space-around----分散居中对齐

    align-items（规定容器"主轴"垂直对齐方式）
      flex-start----在垂直方向上的开始点对齐
      flex-end----在垂直方向上的结束点对齐
      center----在垂直方向上的中间点对齐

    flex-wrap（规定换行）
      nowrap----默认值，不换行
      wrap----换行(在当前行的下方换行)
      wrap-reverse----换行(在当前行的上方换行)

    align-content（规定容器内，行对齐方式）
      stretch----默认值,各行将会伸展以占用剩余的空间
      flex-start----起始点对齐
      flex-end----结束点对齐
      center----中间点对齐
      space-between----两端对齐
      space-around----分散居中对齐
   -->

    <!-- 
     order
     align-self
     flex
    -->

    <div class="container">
        <div class="child1">child1</div>
        <div class="child2">child2</div>
        <div class="child3">child3</div>
        <div class="child4">child4</div>
    </div>
</body>

</html>